<template>
  <div>
    <!--    上方搜索区域-->
    <el-form :inline="true" :model="keyword" ref="searchForm" class="demo-form-inline">
      <div style="margin-left: 50px;margin-top: 10px">
        <el-form-item>
          <el-button type="primary" @click="openAddDialog" icon="el-icon-plus">新增</el-button>
          <el-button type="danger" icon="el-icon-delete" @click="delBatch">批量删除</el-button>
        </el-form-item>
      </div>

      <div style="margin-left: 50px">
        <!--模糊查询按钮：注意这是在el-form内-->

        <div class="block">
          <span class="demonstration">计划开始日期</span>
          <el-date-picker
            v-model="keyword2"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>

          <span style="position: relative;margin-left: 35px">
<!--          <el-form-item label="生产计划编号" prop="producePlanNum">-->
            <!--          <el-input size="small" clearable v-model="keyword.producePlanNum" placeholder="请输入关键字"></el-input>-->
            <!--        </el-form-item>-->
        <el-form-item>
          <el-button type="primary" size="small" @click="search" icon="el-icon-search">查询</el-button>
          <el-button type="primary" plain size="small" @click="resetSearchForm('searchForm')" icon="el-icon-refresh">
            重置
          </el-button>
        </el-form-item>
        </span>

        </div>

      </div>


    </el-form>


    <!--添加/更新对话框-->
    <!--    <el-dialog :title="title" :visible.sync="dialogFormVisible" width="40%">-->
    <!--      <el-form :model="produceOrder" :rules="produceOrderRules" ref="produceOrderRulesForm">-->

    <!--        <h2>基本信息</h2>-->
    <!--        <el-form-item label="生产订单号" prop="produceOrderNum">-->
    <!--          <el-input v-model="produceOrder.produceOrderNum" autocomplete="off" style="width:200px"></el-input>-->
    <!--        </el-form-item>-->
    <!--        <el-form-item label="客户">-->
    <!--          <el-input v-model="produceOrder.client" autocomplete="off" style="width:200px"></el-input>-->
    <!--        </el-form-item>-->
    <!--        <el-form-item label="销售单号">-->
    <!--          <el-input v-model="produceOrder.saleOrderNum" autocomplete="off" style="width:200px"></el-input>-->
    <!--        </el-form-item>-->
    <!--        <el-form-item label="优先级" prop="priority">-->
    <!--          <el-radio-group v-model="produceOrder.priority">-->
    <!--            &lt;!&ndash;标签中间的是,对外展现的,label中的1是表单数据,发给后端的&ndash;&gt;-->
    <!--            <el-radio label="1">紧急</el-radio>-->
    <!--            <el-radio label="0">非紧急</el-radio>-->
    <!--          </el-radio-group>-->
    <!--        </el-form-item>-->
    <!--        <el-form-item label="备注">-->
    <!--          <el-input v-model="produceOrder.remark" autocomplete="off" style="width:300px"></el-input>-->
    <!--        </el-form-item>-->

    <!--        <el-form-item label="产品编号">-->
    <!--          <el-input v-model="produceOrder.productCode" autocomplete="off" style="width:300px"></el-input>-->
    <!--        </el-form-item>-->

    <!--        <el-button @click="addProduct">确认添加产品</el-button>-->

    <!--        <h5>所添加产品:{{}}</h5>-->

    <!--      </el-form>-->

    <!--      <div slot="footer" class="dialog-footer">-->
    <!--        <el-button @click="cancelAdd">取 消</el-button>-->
    <!--        <el-button type="primary" @click="addProOrd('produceOrderRulesForm')">确 定</el-button>-->
    <!--      </div>-->
    <!--    </el-dialog>-->


    <!--      下方表格-->
    <el-table v-loading="loading" :data="produceWorkOrderList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center"/>
      <el-table-column width="110" label="工单编号" align="center" prop="workOrderNum"/>
      <el-table-column width="110" label="工单状态" align="center" prop="workState"/>
      <el-table-column width="100" label="计划开始日期" align="center" prop="planStartTime"/>
      <el-table-column width="100" label="计划结束日期" align="center" prop="planOverTime"/>
      <el-table-column width="110" label="优先级" align="center" prop="priority">
        <template slot-scope="scope">
          <el-tag :type="scope.row.priority == 0?'':'danger'">
            <span>{{ scope.row.priority == 1 ? '紧急' : '正常' }}</span></el-tag>
        </template>
      </el-table-column>
      <el-table-column width="110" label="产品名称" align="center" prop="productName"/>
      <el-table-column width="110" label="产品编码" align="center" prop="productCode"/>
      <el-table-column width="110" label="物料类型" align="center" prop="itemType"/>
      <el-table-column width="110" label="制造方式" align="center" prop="produceStyle"/>
      <el-table-column width="110" label="计划产量" align="center" prop="planProduceNum"/>
      <el-table-column width="110" label="完成数量" align="center" prop="producedNum"/>
      <el-table-column width="110" label="车间" align="center" prop="workspace"/>
      <el-table-column width="110" label="生产线" align="center" prop="produceLine"/>
      <el-table-column width="110" label="工艺" align="center" prop="craft"/>
      <el-table-column width="110" label="当前工序" align="center" prop="currentStep"/>
      <el-table-column width="110" label="生产订单号" align="center" prop="produceOrderNum"/>
      <!--      <el-table-column width="110" label="生产状态" align="center" prop="produceState">-->
      <!--        <template slot-scope="scope">-->
      <!--          <span>{{ scope.row.produceState == 'plan' ? '已计划' : '待计划' }}</span>-->
      <!--        </template>-->
      <!--      </el-table-column>-->
      <el-table-column width="100" label="交付日期" align="center" prop="deliveryDate"/>
      <el-table-column width="100" label="销售单号" align="center" prop="saleOrderNum"/>
      <el-table-column width="110" label="备注" align="center" prop="remark"/>
      <el-table-column width="110" label="实际开始日期" align="center" prop="realStartDate"/>
      <el-table-column width="110" label="实际结束日期" align="center" prop="realOverDate"/>
      <el-table-column width="110" label="创建人" align="center" prop="creater"/>
      <el-table-column width="100" label="创建时间" align="center" prop="createTime"/>

      <el-table-column width="200" label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleWorkDown(scope.row)"
          >工单下发
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleStop(scope.row)"
          >暂停
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleClose(scope.row)"
          >关单
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5, 10, 20]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
</template>

<script>

// import produceOrder from "@/views/produce/produceOrder/index.vue";


import {delBatchWorkOrders, getList, workOrderClose, workOrderDown, workOrderStop} from "@/api/produceWorkOrder";

export default {
  name: "ProduceOrder",
  // computed: {
  //   produceOrder() {
  //     return produceOrder
  //   }
  // },
  data() {
    return {
      pageNum: 1,
      pageSize: 5,
      currentPage: 1,
      total: 0,

      // 暂未用
      keyword: {},
      keyword2: "",
      startTime: null,
      overTime: null,
      startNum: null,
      overNum: null,


      multipleSelection: [],
      idList: [],

      //增加页面所用
      title: "",
      produceWorkOrder: {

        workOrderNum: null,
        workState: null,

        // produceOrderNum: null,
        // saleOrderNum: null,
        // client: null,
        // priority: null,
        // productCode: null,
        // remark: null,


      },


      // 遮罩层
      loading: true,
      //生产订单表格数据
      produceWorkOrderList: [],

      dialogFormVisible: false,

      produceOrderRules: {
        produceOrderNum: [
          {required: true, message: '生产订单编号不能为空', trigger: 'blur'},
        ],
        priority: [
          {required: true, message: '优先级不能为空', trigger: 'blur'},
        ],

      }

    }
  },
  methods: {

    fetchData() { // 查询数据
      let params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        // 赋值参数 带到后端模糊查询
        startNum: this.startNum,
        overNum: this.overNum
      }

      getList(params).then(res => {
        let pageInfo = res.data;
        // console.log("pageInfo", pageInfo)
        this.loading = false;

        // console.log("pageInfo.list", pageInfo.list)
        this.produceWorkOrderList = pageInfo.list;
        // console.log("this.produceOrderList", this.produceOrderList)
        this.total = pageInfo.total
      })
    },

    // 页面大小改变时触发
    handleSizeChange(val) {
      this.pageSize = val;
      this.fetchData()
    },
    // 当前页码改变时触发
    handleCurrentChange(val) {
      this.pageNum = val;
      this.fetchData()
    },
    search() {
      console.log(this.keyword2)
      this.startTime = this.keyword2[0];
      this.overTime = this.keyword2[1];
      console.log("startTime", this.startTime)
      console.log("overTime", this.overTime)
      this.startNum = new Date(this.startTime).getTime();
      console.log("startNum", this.startNum)
      this.overNum = new Date(this.overTime).getTime();
      console.log("overNum", this.overNum)


      this.fetchData()
    },
    resetSearchForm(formName) {
      // this.$refs[formName].resetFields();
      // this.fetchData()
    },

    // 多选框选中数据
    handleSelectionChange(val) {
      this.idList = [];  // 每次清空前先置空数组
      this.multipleSelection = val; // 得到选中的对象
      console.log("multipleSelection", this.multipleSelection)
      for (let i = 0; i < this.multipleSelection.length; i++) {
        this.idList.push(this.multipleSelection[i].workOrderNum)
      }
      console.log("idList", this.idList)
    },

    // 点击下发
    handleWorkDown(row) {
      this.produceWorkOrder.workOrderNum = row.workOrderNum;
      this.$confirm('是否确认下发"' + this.produceWorkOrder.workOrderNum + '"工单？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.produceWorkOrder.workState = "工单下发";
        // 此处执行修改工单状态，具体修改在后端业务层实现
        workOrderDown(this.produceWorkOrder).then(res => {
          this.$message({
            type: 'success',
            message: '工单下发成功!'
          });
          this.fetchData();
          this.$refs[formName].resetFields();
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消下发',
          duration: 1000
        });
      });
    },

    // 点击暂停
    handleStop(row) {
      this.produceWorkOrder.workOrderNum = row.workOrderNum;
      this.$confirm('是否确认暂停"' + this.produceWorkOrder.workOrderNum + '"工单？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.produceWorkOrder.workState = "暂停";
        // 此处执行修改工单状态，具体修改在后端业务层实现
        workOrderStop(this.produceWorkOrder).then(res => {
          this.$message({
            type: 'success',
            message: '工单已暂停!'
          });
          this.fetchData();
          this.$refs[formName].resetFields();
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消暂停',
          duration: 1000
        });
      });
    },

    // 点击关单
    handleClose(row) {
      this.produceWorkOrder.workOrderNum = row.workOrderNum;
      this.$confirm('是否确认关闭"' + this.produceWorkOrder.workOrderNum + '"工单？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.produceWorkOrder.workState = "关单";
        // 此处执行修改工单状态，具体修改在后端业务层实现
        workOrderClose(this.produceWorkOrder).then(res => {
          this.$message({
            type: 'success',
            message: '工单已关闭!'
          });
          this.fetchData();
          this.$refs[formName].resetFields();
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消关单',
          duration: 1000
        });
      });
    },


    addProduct() {

    },

    //取消添加响应
    cancelAdd() {

    },

    //确认添加按钮
    addProOrd(formName) {

    },

    // 点击操作-编辑
    handleUpdate(row) {

    },
    // 点击操作-删除
    handleDelete(row) {

    },


    // 批量删除
    delBatch() {
      this.$confirm('是否确认删除编号为"[' + this.idList + ']"的生产工单？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        console.log("执行到批量删除前..")
        let idStr = this.idList.join(",")
        console.log("idStr为", idStr)

        delBatchWorkOrders({
          ids: this.idList.join(",")// 注意此ids命名是因为后端传参名
        }).then(res => {
          console.log("执行到批量删除后then..")

          this.$message({
            type: 'success',
            message: '删除成功!',
            duration: 1000
          });
          this.fetchData();

        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除',
          duration: 1000
        });
      });
    },

    //添加所用方法：
    openAddDialog() {
      this.$router.push({name: 'AddWorkOrder'})
    }


  },

  // 生命周期钩子函数(vue对象创建完,自动调用该方法)
  created() {
    console.log("created()函数运行")
    this.fetchData()
    console.log("created()函数中查找数据完毕?..")
  },

}

</script>

<style scoped lang="scss">

</style>
